---
order: 1.1
category: '@threlte/theatre'
title: '<Theatre>'
sourcePath: 'packages/theatre/src/lib/theatre/Theatre.svelte'
type: 'component'
componentSignature:
  {
    props:
      [
        {
          name: 'studio',
          type: '{ enabled?: boolean, hide?: boolean }',
          default: '{}',
          required: false
        },
        { name: 'config', type: 'IProjectConfig', required: false }
      ]
  }
---

The component `<Theatre>` is a convenience shortcut and provides a default `<Project>` and `<Sheet>` to get you set up as fast as possible. It also includes a `<Studio>` which can be disabled with the property `studio`: `<Theatre studio={false} />`

### Example

The component `<Theatre>` is a good choice if you want to test the waters or to quickly spin up an experiment.

```svelte
<script lang="ts">
  import { Canvas, T } from '@threlte/core'
  import { SheetObject, Theatre } from '@threlte/theatre'
</script>

<Canvas>
  <Theatre>
    <SheetObject key="Camera">
      {#snippet children({ Transform })}
        <Transform>
          <T.PerspectiveCamera
            makeDefault
            position={[5, 10, 3]}
          />
        </Transform>
      {/snippet}
    </SheetObject>

    <SheetObject key="Cube">
      {#snippet children({ Transform })}
        <Transform>
          <T.Mesh position.y={0.5}>
            <T.BoxGeometry />
            <T.MeshBasicMaterial color="hotpink" />
          </T.Mesh>
        </Transform>
      {/snippet}
    </SheetObject>

    <T.GridHelper />
  </Theatre>
</Canvas>
```
